<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X型开场效果</title>
    <link rel="stylesheet" href="./css/XKaiChang.css">
</head>

<body>
    <div class="containter">
        <!-- 视频 -->
        <!-- <video src=""></video> -->
        <img width=100%
            src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/a6efce1b9d16fdfa41746e67b08f8c5494ee7b1b.jpg"
            alt="">
        <div class="mask"></div>
    </div>
    <script>
        let scale = 36;
        let mask = document.querySelector('.mask');
        let inte = setInterval(() => {
            scale = scale - 0.01;
            mask.style.transform = "scale(" + scale + ")"
            if (scale <= 1) {
                scale = 1;
                clearInterval(inte);
            }
        }, 10);
    </script>
</body>

</html>